<template>
    <div class="hot">
        <div class="container">
            <el-row>
  <el-col :span="4" v-for="(o, index) in options" :key="o" :offset="index > 0 ? 0 : 0">
    <el-card :body-style="{ padding: '0px' }">
      <img :src="o.coursesImg" class="image" width="100%px" height="100%px">
      <div style="padding: 14px;">
        课程名称:<span>{{o.coursesName}}</span>
        <div class="bottom clearfix">
          价格:{{ o.coursesPrice }}<br>
          <el-button type="text" class="button">查看课程</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
        </div>

    </div>
</template>

<script>
    import category from "../../assets/js/category";
    import $ from 'jquery'

    export default {
        name: "hot",
        data(){
            return {
                options:[]
            }
            
        },
        mounted() {
            category.typeClassAdd(5);
            category.changeBgTitle('热门课程');
            this.$store.commit('showCur','40');
            //category.curAdd(1)
            //this.$store.commit('activeCur','1');
            //$(".curList dd:nth-of-type(1)").addClass("curItemActive");
            this.$nextTick(() => {
                this.$store.commit('activeCur','1');
            })
        },
        created:function()
        {
            this.axios
            ("https://localhost:44347/api/app/coursese/courses-list")
            .then(S =>
            {
                this.options=S.data
            }
            )
        },
        beforeRouteLeave(to, from, next){
            category.typeClassRemove(5);
            next();
        },

        methods:{

        }
    }
</script>

<style scoped>

</style>